<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="24" :xs="24" class="mb-[24px]">
				<div class="bg-white py-[24px] px-[40px] rounded-[20px]">
					<div class="text-[14px] font-bold mb-[32px]">个人信息</div>
					<div class="flex items-center">
						<userAvatar class="mr-[56px]" />
						<div class="flex flex-col">
							<div class="mb-[16px] text-[14px]">用户名称：{{ user.userName }}</div>
							<div class="text-[14px]">手机号码：{{ user.phonenumber }}</div>
						</div>
						<div class="w-[1px] h-[43px] bg-[#E5E5E5] mx-[80px]"></div>
						<div class="flex flex-col">
							<div class="mb-[16px] text-[14px]">用户邮箱：{{ user.email }}</div>
							<div class="text-[14px]">所属部门：{{ user.dept.deptName }} / {{ postGroup }}</div>
						</div>
						<div class="w-[1px] h-[43px] bg-[#E5E5E5] mx-[80px]"></div>
						<div class="flex flex-col">
							<div class="mb-[16px] text-[14px]">所属角色：{{ roleGroup }}</div>
							<div class="text-[14px]">创建时间：{{ user.createTime }}</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="24" :xs="24">
				<div class="bg-white rounded-[20px] info">
					<div class="py-[24px] px-[40px] font-bold info__title">基本信息</div>
					<div class="px-[40px] py-[16px]">
						<el-tabs v-model="activeTab">
							<el-tab-pane label="基本资料" name="userinfo">
								<userInfo :user="user" />
							</el-tab-pane>
							<el-tab-pane label="编辑密码" name="resetPwd">
								<resetPwd :user="user" />
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import userAvatar from './userAvatar';
import userInfo from './userInfo';
import resetPwd from './resetPwd';
import { getUserProfile } from '@/api/system/user';

export default {
	name: 'Profile',
	components: { userAvatar, userInfo, resetPwd },
	data() {
		return {
			user: {},
			roleGroup: {},
			postGroup: {},
			activeTab: 'userinfo',
		};
	},
	created() {
		this.getUser();
	},
	methods: {
		getUser() {
			getUserProfile().then((response) => {
				this.user = response.data;
				this.roleGroup = response.roleGroup;
				this.postGroup = response.postGroup;
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.info {
	&__title {
		border-bottom: 1px solid #f5f5f5;
	}
	::v-deep {
		.el-tabs__nav-wrap::after {
			display: none;
		}
		.el-tabs__active-bar {
			height: 1px;
		}
	}
}
</style>
